<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .checkBox{height:20px;cursor: pointer;display: inline-block;}
        .box{position: relative;width:20px;height:15px;display: inline-block;}
        .checkBox span{position: absolute;width:10px;height:20px;background: #ccc;border-radius: 5px 5px 0px 0px;}
        .checkBox span:nth-child(1){transform: rotate(-45deg);}
        .checkBox span:nth-child(2){transform: translateX(7px) rotate(45deg);}
    </style>
</head>
<body>

    <div class="app">
        <h2>{{title}}</h2>
        
        <input v-for="item in cont" type="button" :value="item.title" @click="change(item.content)">
        <br>
        
        <keep-alive>
            <component :is="currentCont"></component>
        </keep-alive>

        <!-- <component :is="currentCont"></component> -->

        <!-- <Check-Box></Check-Box>
        <Item></Item> -->

    </div>
</body>
<script src="../vue.global.js"></script>
<script src="./components/CheckBox.js"></script>
<script src="./components/Item.js"></script>
<script>

    const {createApp, reactive, ref} = Vue;
    
    const app = createApp({
        setup(){
            const title = "选项卡";
            const currentCont = ref("CheckBox");
            const cont = reactive([{
                title:"选项卡1",
                content:"CheckBox"
            },{
                title:"选项卡2",
                content:"Item"
            }]);

            function change(name){
                currentCont.value = name
            }

            return {cont, title, change, currentCont};
        },
        components:{
            CheckBox, Item
        }
    })
    app.mount(".app");





</script>
</html>